知识篇 -- HTML Shadow DOM：组件封装的利器

Ray Shine 2024/3/30 HTML进阶知识Web Components

本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

如有侵权，请联系本博主删除。

在Web Components技术栈中，Shadow DOM扮演着至关重要的角色，它提供了一种将DOM和CSS封装起来的方式，使得组件的内部结构和样式不会泄露到外部，也不会受到外部样式的影响。这解决了传统Web开发中组件样式冲突、DOM结构混乱等问题，为构建真正独立的、可复用的Web组件提供了强大的支持。

# 什么是Shadow DOM？

Shadow DOM（影子DOM）允许开发者将一个独立的DOM树附加到常规DOM树中的一个元素上。这个独立的DOM树被称为“影子树”（Shadow Tree），它与主文档的DOM树是隔离的。影子树的根节点被称为“影子根”（Shadow Root），而附加了影子根的元素被称为“影子宿主”（Shadow Host）。

核心特点：

封装性：Shadow DOM内部的DOM结构和样式与外部完全隔离。外部的CSS规则不会影响到影子树内部的元素，影子树内部的CSS规则也不会影响到外部元素。
隔离性：通过JavaScript的 querySelector 等方法无法直接访问到影子树内部的元素，除非通过 shadowRoot 属性。
原生支持：Shadow DOM是浏览器原生提供的功能，无需任何JavaScript框架即可使用。

# Shadow DOM的工作原理

当一个元素被指定为影子宿主并附加了影子根后，浏览器会为这个元素创建一个渲染边界。在这个边界内部，你可以构建一个完全独立的DOM结构，并为其定义样式。

渲染流程：

主文档DOM：包含影子宿主元素。
影子宿主：一个普通的DOM元素，但它附加了一个影子根。
影子根：影子树的根节点，它内部包含了一组DOM元素和样式。
影子树：由影子根及其子节点组成的DOM结构。

浏览器在渲染页面时，会渲染影子宿主元素，但其内部的内容（如果存在）会被影子树的内容替换或与影子树的内容合并（通过 <slot> 元素）。

# 如何使用Shadow DOM？

使用Shadow DOM主要通过 Element.attachShadow() 方法。

# 1. 附加Shadow Root

attachShadow() 方法接受一个配置对象作为参数，其中最重要的属性是 mode。

mode: 'open'：
- 表示Shadow DOM是“开放”的，可以通过JavaScript从外部访问（例如 element.shadowRoot）。
- 这是最常用的模式，因为它允许开发者在需要时对组件内部进行检查和操作。
mode: 'closed'：
- 表示Shadow DOM是“封闭”的，无法通过JavaScript从外部访问 element.shadowRoot。
- 这提供了更强的封装性，但同时也限制了外部对组件内部的控制。

示例：

class MyComponent extends HTMLElement {
    constructor() {
        super();
        // 附加一个开放模式的Shadow Root
        this.shadowRoot = this.attachShadow({ mode: 'open' });

        // 在Shadow DOM内部创建元素和样式
        this.shadowRoot.innerHTML = `
            <style>
                :host { /* 针对影子宿主本身的样式 */
                    display: block;
                    border: 1px solid #ccc;
                    padding: 10px;
                    font-family: sans-serif;
                }
                h2 {
                    color: blue;
                }
                p {
                    color: green;
                }
            </style>
            <h2>Hello from Shadow DOM!</h2>
            <p>This content is encapsulated.</p>
        `;
    }
}

customElements.define('my-shadow-component', MyComponent);

使用：

<my-shadow-component></my-shadow-component>
<style>
    /* 这个样式不会影响my-shadow-component内部的h2和p标签 */
    h2 {
        color: red;
    }
</style>

在上面的例子中，my-shadow-component 内部的 h2 会是蓝色，p 会是绿色，而外部的CSS规则 h2 { color: red; } 不会对其产生影响。

# 2. 使用 `<slot>` 元素进行内容分发

虽然Shadow DOM提供了强大的封装性，但有时我们希望允许用户向组件内部插入自定义内容。这时就可以使用 <slot> 元素。<slot> 元素是Shadow DOM中的占位符，它允许外部的“轻量级DOM”（Light DOM）内容插入到影子树的特定位置。

匿名插槽：没有 name 属性的 <slot> 元素，会接收所有未指定 slot 属性的轻量级DOM内容。
具名插槽：带有 name 属性的 <slot> 元素，会接收 slot 属性值与 name 匹配的轻量级DOM内容。

示例：

class MyCard extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .card {
                    border: 1px solid #eee;
                    padding: 15px;
                    border-radius: 8px;
                    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
                    margin-bottom: 10px;
                }
                .header {
                    font-size: 1.2em;
                    font-weight: bold;
                    margin-bottom: 10px;
                    color: #333;
                }
                .content {
                    color: #666;
                }
                .footer {
                    margin-top: 10px;
                    font-size: 0.9em;
                    color: #999;
                }
            </style>
            <div class="card">
                <div class="header"><slot name="card-header">默认标题</slot></div>
                <div class="content"><slot></slot></div> <!-- 匿名插槽 -->
                <div class="footer"><slot name="card-footer"></slot></div>
            </div>
        `;
    }
}

customElements.define('my-card', MyCard);

使用：

<my-card>
    <span slot="card-header">我的自定义卡片</span>
    <p>这是卡片的主体内容，会插入到匿名插槽中。</p>
    <small slot="card-footer">版权所有 &copy; 2024</small>
</my-card>

<my-card>
    <!-- 没有提供card-header，会显示默认标题 -->
    <p>这是另一张卡片，只有主体内容。</p>
</my-card>

# Shadow DOM的样式穿透与定制

尽管Shadow DOM提供了强大的样式隔离，但在某些情况下，我们可能需要对组件内部的样式进行有限的定制。

CSS变量 (Custom Properties)：组件内部可以定义CSS变量，外部可以通过设置这些变量来影响组件内部的样式。

/* Shadow DOM内部 */
:host {
    --card-border-color: #ccc;
}
.card {
    border: 1px solid var(--card-border-color);
}
/* 外部 */
my-card {
    --card-border-color: blue;
}

::part() 伪元素：允许组件的作者暴露内部的某些元素作为“部分”（part），外部可以通过 ::part() 伪元素来选择并样式化这些部分。

// Shadow DOM内部
this.shadowRoot.innerHTML = `
    <style>
        .title {
            color: blue;
        }
    </style>
    <h2 part="title">组件标题</h2>
`;
// 外部
my-component::part(title) {
    color: red;
    font-size: 2em;
}

::slotted() 伪元素：允许在Shadow DOM内部样式化通过 <slot> 插入的外部内容。
```
/* Shadow DOM内部 */
::slotted(p) {
    color: purple;
}
```

# 总结

Shadow DOM是Web Components技术栈中实现组件封装和隔离的核心机制。它通过创建独立的DOM树和样式作用域，有效解决了传统Web开发中样式冲突和DOM结构混乱的问题，使得开发者能够构建出真正独立的、可复用、易于维护的Web组件。理解并熟练运用Shadow DOM，是掌握现代Web组件化开发的关键一步。

← HTML自定义元素 HTML Templates →

一ξひβθ光 i